'use client';

import { useTranslations, useLocale } from 'next-intl';
import Link from 'next/link';

/**
 * Footer Component
 * Displays site footer with navigation links and copyright information
 */
export default function Footer() {
  const t = useTranslations('footer');
  const locale = useLocale();

  const footerLinks = {
    company: [
      { key: 'about', href: `/${locale}/about` },
      { key: 'solutions', href: `/${locale}/solutions` },
      { key: 'contact', href: `/${locale}/contact` },
    ],
    products: [
      { key: 'bike', href: `/${locale}/solutions#bike` },
      { key: 'door', href: `/${locale}/solutions#door` },
    ],
    legal: [
      { key: 'privacy', href: '#' },
      { key: 'terms', href: '#' },
    ],
  };

  return (
    <footer className="bg-gray-50 border-t border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          {/* Brand */}
          <div className="col-span-1">
            <div className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
              BitDoor
            </div>
            <p className="text-sm text-gray-600">{t('copyright')}</p>
          </div>

          {/* Company Links */}
          <div>
            <h3 className="font-semibold text-gray-900 mb-4">{t('company')}</h3>
            <ul className="space-y-2">
              {footerLinks.company.map((link) => (
                <li key={link.key}>
                  <Link
                    href={link.href}
                    className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    {t(link.key)}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Product Links */}
          <div>
            <h3 className="font-semibold text-gray-900 mb-4">{t('products')}</h3>
            <ul className="space-y-2">
              {footerLinks.products.map((link) => (
                <li key={link.key}>
                  <Link
                    href={link.href}
                    className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    {t(link.key)}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Legal Links */}
          <div>
            <h3 className="font-semibold text-gray-900 mb-4">{t('legal')}</h3>
            <ul className="space-y-2">
              {footerLinks.legal.map((link) => (
                <li key={link.key}>
                  <Link
                    href={link.href}
                    className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    {t(link.key)}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Divider */}
        <div className="border-t border-gray-200 pt-8">
          <p className="text-center text-sm text-gray-500">{t('copyright')}</p>
        </div>
      </div>
    </footer>
  );
}